<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @keyframes action_skew{
            0%{transform: skew(-40deg);opacity: 0;}
            50%{ transform: skew(40deg);opacity: 0.2;}
            100%{ transform: skew(0deg);opacity: 1;}
        }

        @keyframes action_rotateY{
            0%{transform: rotateY(0deg);opacity: 0;}
            50%{ transform: rotateY(180deg);opacity: 0.2;}
            100%{ transform: rotateY(360deg);opacity: 1;}
        }

        @keyframes action_translateY{
            0%{transform: translateY(50px);opacity: 0;}
            100%{ transform: translateY(0px);opacity: 1;}
        }
        /*缩放淡入*/
        @keyframes action_scale{
            0%{transform: scale(0.2);opacity: 0;}
            100%{ transform: scale(1);opacity: 1;}
        }
        /*---淡出----*/

        @keyframes action_skewOut{
            0%{transform: skew(40deg);opacity: 1;}
            50%{ transform: skew(-40deg);opacity: 0.2;}
            100%{ transform: skew(0deg);opacity: 0;}
        }

        @keyframes action_rotateYOut{
            0%{transform: rotateY(360deg);opacity: 1;}
            50%{ transform: rotateY(180deg);opacity: 0.2;}
            100%{ transform: rotateY(0deg);opacity: 0;}
        }
        @keyframes action_rotateXOut{
            0%{transform: rotateX(360deg);opacity: 1;}
            20%{ transform: rotateX(320deg);opacity: 0.2;}
            40%{ transform: rotateX(280deg);opacity: 0.4;}
            60%{ transform: rotateX(240deg);opacity: 0.6;}
            80%{ transform: rotateX(200deg);opacity: 0.8;}
            100%{ transform: rotateX(160deg);opacity: 0;}
        }
        /*y平移淡出*/
        @keyframes action_translateYOut{
            0%{transform: rotateY(360deg);opacity: 1; left: 50%; transform: scale(1)}
            50%{ transform: scale(0.5)}
            100%{ transform: rotateY(180deg);opacity: 0; left: 0%; transform: scale(0)}
        }

        @keyframes action_scaleOut{
            0%{transform: scale(1);opacity: 1;}
            100%{ transform: scale(0.2);opacity: 0;}
        }
        #adsBox{
            top:0px;
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.8);
            z-index:9999;
        }
        #adsBox .adsContent{
            text-align: center;
            overflow: hidden;
            height: 98%;
            position: absolute;
            width: 90.2%;
            left: 50%;
            margin-left: -44.6%;
            background-size: 100%;
            top: 1%;
        }
        #closeAds{
            z-index: 99999;
            position: absolute;
            left: 0px;
            top: 0px;
        }
        #closeAds img{
            width: 33px;
            float: right;
            margin: 0.4rem;
        }

    </style>
    <script>
        $(document).ready(function () {
           //actionIn(".adsContent",'action_scale',1,"linear");
            var click=document.getElementById("closeAds")
            click.onclick=function () {
                console.log(9999999)
                actionOut(".adsContent",'action_scaleOut',1,"linear");

            }
        })
        var boo=0;
        var canUse=document.getElementsByTagName("body")[0].style;
        if(typeof canUse.animation!="undefined"||typeof canUse.WebkitAnimation!="undefined"){
            boo=1;/*支持动画*/
        }else{
            boo=0;/*不支持动画*/
        }

        function actionOut(obj,actionName,time,speed){
            if(boo==1){
                $(obj).css({"animation":actionName+" "+time+"s"+" "+speed});
                var setInt_obj=setInterval(function(){
                    $(obj).hide();
                    clearInterval(setInt_obj);
                    document.getElementById("adsBox").remove()
                },time*1000);
            }else $(obj).hide();
        }
        function actionIn(obj,actionName,time,speed){
            $(obj).show();
            if(boo==1)$(obj).css({"animation":actionName+" "+time+"s"+" "+speed,"animation-fill-mode":"forwards"});
        }

    </script>
</head>
<body>
<div id="adsBox">
    <div id="closeAds">
        <img src="assets/images/home/x.png">
    </div>
    <div class="adsContent">

    </div>

</div>

</body>
</html>